<template>
  <div class="gaikuang">
    <div class="header">
      <el-select v-model="value" class="select" placeholder="地区" size="Small" >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input v-model="input" placeholder="请输入关键字查询" size="Small" class="input" />
      <el-button type="primary" size="Small">查询</el-button>
    </div>
    <div class="main">
      <el-table :data="tableData" border="true" stripe="true" class="table" style="width: 100%">
        <el-table-column  label="序号" width="80" align="center">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="area" label="地区" width="190" align="center"/>
        <el-table-column prop="name" label="学校名称" width="150" align="center" />
        <el-table-column prop="sType" label="学校类型" width="150" align="center" />
        <el-table-column prop="teachernum" label="老师人数" width="150" align="center" />
        <el-table-column prop="studentnum" label="学生人数" width="150" align="center" />
        <el-table-column prop="parentsnum" label="家长人数" width="176" align="center" />       
      </el-table>
    </div>
    <div class="footer">
      <paging
        v-if="pagState"
        @pag="handlePag"
        @pag-add="handlePagAdd"
        @pag-reduce="handlePagReduce"
        @pag-skip="handleSkip"
        :msg="pageList"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref,defineAsyncComponent, reactive  } from "vue";
import server from "../../../../api";

// 引入异步分页组件
const paging = defineAsyncComponent(
  () => import("../../../../components/paging.vue")
);


const input = ref("");
const value = ref("");

const options = [
  {
    value: "地区",
    label: "地区",
  },
  {
    value: "学校",
    label: "学校",
  },
];

let tableData = reactive([]); // 表格数据存贮(渲染数据)
let inFormList = ref(); // 表格数据获取
let pages = ref(1); // 当前页
let total = ref(5); // 条数
let pagState = ref(false); // 当获取到数据展示分页

let pageList = ""; // 分页数据，需要传递给分页子组件


// const tableData = [
//   {
//     index:'1',
//     area:'四川省成都市武侯区',
//     schoolname:'实验学校1',
//     schooltype:'小学',
//     teachernum:'123',
//     studentnum:'54188',
//     parentsnum:'96599'
//   }
// ]

//发请求
const getRes = async (pagDate: { cp: number; ps: number }) => {
  const res = await server.yonghutongji.getschool_bypage(pagDate);
  // console.log(res.data.data);

  inFormList.value = res.data.data.data; // 表格数据
  // console.log(res.data.data.data);
  
  pageList = res.data.data.page; // 分页数据
  pagState.value = true; // 当有数据展示分页条

  // 对获取的对象数据转化为数组形式
  for (let i = 0; i < inFormList.value.length; i++) {
    tableData.push(inFormList.value[i]);
  }
};
getRes({ cp: pages.value, ps: total.value });

// 分页条数更改数据
function listMain(upDate: { pages: number; total: number }) {
  tableData.length = 0; // 清空分页
  getRes({ cp: upDate.pages - 1, ps: upDate.total });
}

// 条数变更 --- 处理 分页组件 handlePag 事件
function handlePag(value: { pages: number; total: number }) {
  listMain(value);
}
// 增加
function handlePagAdd(value: { pages: number; total: number }) {
  listMain(value);
}

// 减少
function handlePagReduce(value: { pages: number; total: number }) {
  listMain(value);
}
</script>

<style scoped>
.gaikuang{
  margin: 20px;
}
.header{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}
.header .input{
  width: 200px;
  margin-right: 20px;
}
.header .select{
  width: 80px;
}
/* .main{
  text-align: center;
} */
.main .table{
  margin:auto
}
</style>